<template>
	<view class="page">
		<view class="case-list" v-if="list.length">
			<view class="case-item" v-for="(item, index) in list" :key="index">
				<image mode="aspectFill" class="case-image" :src="item.image" @click.prevent="editItem(item)"></image>
				<image class="delete-icon" src="/static/images/detele.png" @click.prevent="deleteItem(item)"></image>
			</view>
		</view>
		<view class="empty-view" v-else>暂无案例</view>
		<view class="bottom">
			<view class="btn" @tap.stop="add()">添加案例</view>
		</view>
	</view>
</template>

<script>
	import {
		requestExampleList,
		requestDeleteExample
	} from '@/apis/request.js';

	export default {
		data() {
			return {
				id: '',
				list: [],
				page: 1,
				total: 0
			};
		},
		onLoad(options) {
			this.id = options.id;
		},
		onShow() {
			this.init();
		},
		onPullDownRefresh() {
			this.init();
		},
		onReachBottom() {
			if (this.list.length < this.total) {
				this.getList();
			}
		},
		methods: {
			init() {
				this.page = 1;
				this.total = 0;
				this.getList();
			},
			/**
			 * 我的案例列表
			 */
			getList() {
				requestExampleList({
					escortId: this.id,
					pageNo: this.page,
					pageSize: 10
				}).then(res => {
					if (this.page == 1) {
						this.list = res.records;
						this.total = res.total
					} else {
						this.list = this.list.concat(res.records);
					}
					if (this.list.lenth < this.total) {
						this.page++;
					}
				}).finally(() => {
					uni.stopPullDownRefresh();
				});
			},
			add() {
				uni.navigateTo({
					url: '/pages/attendantPages/editCase'
				});
			},
			editItem(item) {
				uni.navigateTo({
					url: '/pages/attendantPages/editCase?data=' + JSON.stringify(item)
				});
			},
			/**
			 * 删除案例
			 * @param {Object} item
			 */
			deleteItem(item) {
				uni.showModal({
					title: '删除案例',
					content: '您确定要删除该案例吗？',
					success: (res) => {
						if (res.confirm) {
							requestDeleteExample({
								id: item.id
							}).then(res => {
								this.init();
							});
						}
					}
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.page {
		background-color: #FFFFFF;
		height: 100%;
		min-height: 100vh;

		.case-list {
			padding: 20rpx 20rpx;
			display: flex;
			flex-wrap: wrap;
			margin-bottom: 120rpx;

			.case-item {
				margin: 8rpx 15rpx;
				position: relative;

				.case-image {
					width: 205rpx;
					height: 205rpx;
					border-radius: 10rpx;
				}

				.delete-icon {
					position: absolute;
					top: 6rpx;
					right: 6rpx;
					width: 44rpx;
					height: 44rpx;
				}
			}
		}

		.bottom {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;

			.btn {
				margin: 20rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				border-radius: 40rpx;
				font-size: 30rpx;
				color: #FFFFFF;
				background-color: #32C59A;
			}
		}
	}
</style>